<template>
	<!--项目基础信息模块管理-->
  <div class="container-app">
    <div style="margin-bottom:15px;">
      <el-button v-if="hasAdd" size="small" type="success" @click="addLine"><i class="el-icon-plus"></i>{{addTitle}}</el-button>
      <el-button v-if="hasDel" size="small" type="danger" @click="removeLine"><i class="el-icon-delete"></i>{{delTitle}}</el-button>
      <el-button v-if="hasUpdate" size="small" type="primary" @click="changeLine"><i class="el-icon-edit-outline"></i>{{updateTitle}}</el-button>
      <span class="right-search">
        <el-input @change="findLine" v-model="findData" size="small" placeholder="输入关键字搜索" style="width:300px;">
          <el-button @click="findLine" slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </span>
    </div>
    <el-table @selection-change="getRow" :data="tableData" tooltip-effect="dark" style="width: 100%" border v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column prop="mdCode" label="模块编号"></el-table-column>
			<el-table-column prop="description" label="模块菜单名称"></el-table-column>
			<el-table-column prop="mdTitle" label="模块名称"></el-table-column>
			<el-table-column prop="mdTypeName" label="所属功能"></el-table-column>
			<el-table-column prop="createtime" label="创建人" width="160"></el-table-column>
			<el-table-column prop="createtime" label="创建时间" width="160"></el-table-column>
	</el-table>
   
   <!--新增修改对话框-->
		<el-dialog :title="title" :visible.sync="isDialog" width="60%" :before-close="handleClose" :close-on-click-modal='false'>
			<el-form size="small" :model="ruleForm" ref="ruleForm"  :rules="rules" label-width="120px" class="form-submit">
				<el-form-item label="所属功能：" prop="mdType">
					<el-select v-model="ruleForm.mdType" size="small" style="width:80%" placeholder="请选择所属功能">
			            <el-option
			              v-for="item in modelMenus"
			              :key="item.value"
			              :label="item.title"
			              :value="item.value">
			            </el-option>
			        </el-select>
				</el-form-item>
				<el-form-item label="模块编号：" prop="mdCode">
					<el-input size="small" v-model="ruleForm.mdCode" placeholder="请输入模块编号"></el-input>
				</el-form-item>
				<el-form-item label="模块菜单名称：" prop="description">
					<el-input size="small" v-model="ruleForm.description" placeholder="请输入模块菜单名称"></el-input>
				</el-form-item>
				<el-form-item label="模块名称：" prop="mdTitle">
					<el-input size="small" v-model="ruleForm.mdTitle" placeholder="请输入模块名称"></el-input>
				</el-form-item>
				
			</el-form>
			<span slot="footer" style="padding-right:30px;">
       			<el-button size="small" type="success" @click="submitForm('ruleForm')">保存</el-button>
	        	<el-button v-show="changeVisible" size="small" type="warning" @click="resetForm('ruleForm')">重置</el-button>
	       		<el-button size="small" @click="cancleForm('ruleForm')">取消</el-button>
        	</span>
	</el-dialog>
  </div>
</template>

<script>
import {
		getserver,
		postserver
	} from '@/api/basicFunction'
export default {
  data() {
    return {
      title: '新增项目基础信息模块信息',
	isUsable: 1,
	isType: 1,
	changeVisible: true,
	isDialog: false,	
	loading: false,
	tableData: [],
	modelMenus: [{
		title: '科技成果',
		value: '1'
	}, {
		title: '科技需求',
		value: '2'
	}, {
		title: '科技人才库',
		value: '3'
	}, {
		title: '专家库',
		value: '4'
	}, {
		title: '新闻动态',
		value: '5'
	}, {
		title: '公告',
		value: '6'
	}],
	ruleForm: {
		mdType: '',
		mdCode: '',
		mdTitle: '',
		mdId: '',
		description:''
	},
	removeIds: [],
	selectData: [],
	rules: {
		mdType: [{
			required: true,
			trigger: 'blur',
			message: '请选择所属功能'
		}],
		mdCode: [{
			required: true,
			trigger: 'blur',
			message: '请输入模块编号'
		}],
		mdTitle: [{
			required: true,
			trigger: 'blur',
			message: '请输入模块名称'
		}],
		description: [{
			required: true,
			trigger: 'blur',
			message: '请输入模块菜单名称'
		}]
	},
	isAdd: true,
    findData: '',
    hasAdd: false,
    hasDel: false,
    hasUpdate: false,
    selectId: '',
    addTitle: '新增',
    updateTitle: '修改',
    delTitle: '删除'
    }
  },
  mounted() {
    this.getPageList()
   	this.getJur()
  },
  methods: {
    getJur() {
      const self = this
      self.$store.dispatch('Juage', self.$store.clickMenuId).then(res => {
        if (res.code == '200') {
          res.data.forEach(item => {
            if (item.type == '3') {
              self.hasAdd = true
              self.addTitle = item.title
            }
            if (item.type == '5') {
              self.hasDel = true
              self.delTitle = item.title
            }
            if (item.type == '4') {
              self.hasUpdate = true
              self.updateTitle = item.title
            }
          })
        } else if (res.code !== '507') {
          		this.$message({
            	type: 'error',
				message: res.message
				})
			}
		})
	},
	getPageList() {
		const para = {
			pageIndex: this.dataPage,
			pageSize: 10
		}
		this.loading = true
		getserver(para, "/md/getAll").then(res => {
			if(res.code == '200') {
				this.loading = false
				this.tableData = res.data
				//mdTypeName
				for(let i=0;i<this.tableData.length;i++){
					this.modelMenus.forEach(item => {
			          if(item.value == this.tableData[i].mdType){
			          	this.tableData[i].mdTypeName = item.title
			          }
			        })
					
				}
			} else {
				this.$message({
					type: 'error',
					message: res.message
				})
			}
			this.loading = false
		})
	},
    handleClose() {
    	this.isDialog = false
    },
    submitForm(formName) {
      const self = this
      self.$refs[formName].validate((valid) => {
        if (valid) {
          const para = {
            mdCode: self.ruleForm.mdCode,
            mdTitle: self.ruleForm.mdTitle,
            mdType: self.ruleForm.mdType,
            description: self.ruleForm.description
          }
          if (self.isAdd) {
            postserver(para, "/md/add").then(res => {
				if(res.code == '200') {
					self.$message({
						type: 'success',
						message: res.message
					})
					self.getPageList()
				} else {
					self.$message({
						type: 'error',
						message: res.message
					})
				}
				self.isDialog = false
				self.$refs[formName].resetFields()
			})
          } else {
            para.id = self.selectId
            postserver(para, "/md/update").then(res => {
				if(res.code == '200') {
					self.$message({
						type: 'success',
						message: res.message
					})
					self.getPageList()
				} else {
					this.$message({
						type: 'error',
						message: res.message
					})
				}
				self.isDialog = false
				self.$refs[formName].resetFields()
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.restData()
    },
    cancleForm(formName) {
      this.$refs[formName].resetFields()
      this.isDialog = false
    },
    removeLine() {
      if (this.selectData.length) {
        this.$confirm('删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        	console.log(this.removeIds);
           const para = { ids: this.removeIds.toString() }
			postserver(para, "/md/delete").then(res => {
				if(res.code == '200') {
					this.$message({
						type: 'success',
						message: res.message
					})
					this.getPageList()
				} else {
					this.$message({
						type: 'success',
						message: res.message
					})
				}
			})
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else {
        this.$message('请先选择需要删除的信息！')
      }
    },
    restData() {
      this.ruleForm.description = ''
      this.ruleForm.mdCode = ''
      this.ruleForm.phone = ''
      this.ruleForm.mdType = ''
      this.ruleForm.mdTitle = ''
    },
    addLine(formName) {
      this.title = '新增项目基础信息模块'
      this.roleVisible = true
      this.changeVisible = true
      this.isAdd = true
      this.isDialog = true
    },
    changeLine() {
      const self = this
      if (self.selectData.length && self.selectData.length === 1) {
        self.isAdd = false
        self.title = '修改项目基础信息模块'
        self.changeVisible = false
        self.isDialog = true
        self.ruleForm.mdType = String(self.selectData[0].mdType)
        self.ruleForm.mdCode = self.selectData[0].mdCode
        self.ruleForm.mdTitle = self.selectData[0].mdTitle
        self.ruleForm.description = self.selectData[0].description
        console.log(self.selectData[0])
        self.selectId = self.selectData[0].mdId
        
      } else {
        this.$message('请选择一条信息进行修改！')
      }
    },
    getRow(selection) {
      this.removeIds = []
      this.selectData = selection
      selection.forEach(item => {
      	console.log(item)
        this.removeIds.push(item.mdId)
      })
    },
    findLine() {
      const para = { row: 10, page: 1, keywords: this.findData }
      getUserList(para).then(res => {
        if (res.code == '200') {
          this.dataTotal = res.datas.total
          this.tableData = res.datas.list
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.paging{
  padding: 15px;
  padding-right: 0;
}
.form-submit{
  margin: 0;
  padding-right: 30px;
}
</style>
